<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="header-title">待办</text>
		</view>

		<!-- 分类标签 -->
		<view class="tabs">
			<view 
				class="tab-item" 
				v-for="(item,index) in Topbar" 
				:key="index"
				@click="changeItem(index)"
				:class="{'active': topitem === index}"
			>
				<text>{{item.text}}</text>
				<text class="tab-count" v-if="getCount(index)">{{getCount(index)}}</text>
			</view>
		</view>

		<!-- 待办列表 -->
		<scroll-view class="todo-list" scroll-y>
			<view 
				class="todo-item animate__animated animate__fadeIn" 
				v-for="(item,index) in todoList"
				:key="index"
			>
				<view class="todo-left">
					<checkbox 
						:checked="topitem === 1"
						@tap="changeIsOver(item._id,item.isOver,topitem)"
						:class="{'checked': topitem === 1}"
					/>
					<view class="todo-content">
						<text class="todo-title" :class="{'completed': topitem === 1}">{{item.inputText}}</text>
						<view class="todo-info">
							<view class="time">
								<image src="/static/calendarfilled.png"></image>
								<text>{{item.strDate}} {{item.strHour}}</text>
							</view>
							<text class="note" v-if="item.textareaMain">{{item.textareaMain}}</text>
						</view>
					</view>
				</view>

				<view class="todo-right">
					<view class="star-btn" @tap="changeAtten(item._id,item.strWarn,topitem)">
						<image 
							:src="item.strWarn === '重要' ? '../../static/starfilled.png' : '/static/star.png'"
							:class="{'important': item.strWarn === '重要'}"
						/>
					</view>
					<view class="delete-btn" @tap="deleteTodo(item._id)">
						<image src="/static/delete.png" />
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 添加按钮 -->
		<view class="add-btn" @tap="addTodoList">
			<image src="/static/addfilled.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Topbar: [
					{ text: "未完成" },
					{ text: "已完成" }
				],
				topitem: 0,
				todoList: []
			}
		},
		onReady() {
			uni.showLoading({
				title: "数据更新中"
			})
			this.UpdateList(0)
			this.changeItem(0)
		},
		onShow() {
			this.UpdateList(0)
		},
		
		methods: {
			changeIsOver(x, y, z) {
				uni.showLoading({
					title: "数据更新中"
				})
				uniCloud.callFunction({
					name: 'isOverList',
					data: {
						_id: x,
						isOver: y
					}
				}).then(res => {
					// location.reload()
					this.UpdateList(z)
				}).catch(err => {
					console.log(err)
				})
			},
			UpdateList(res) {
				uni.showLoading({
					title: "加载中..."
				})
				
				uniCloud.callFunction({
					name: 'ListTodolist',
					data: {
						index: res
					}
				}).then(res => {
					uni.hideLoading()
					this.todoList = res.result.data
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
					console.error(err)
				})
			},
			changeItem(res) {
				this.topitem = res
				this.UpdateList(res)
				if(res==1){
					uni.setNavigationBarColor({
					  frontColor: '#ffffff', // 导航栏标题颜色，只能是'black'或'white'
					  backgroundColor: '#eeafaf' // 导航栏背景颜色
					});
				}else{
					uni.setNavigationBarColor({
					  frontColor: '#000000', // 导航栏标题颜色，只能是'black'或'white'
					  backgroundColor: '#9accf1' // 导航栏背景颜色
					});
				}
			},
			async addTodoList() {
				uni.navigateTo({
					url: '/pages/AddListThing/AddListThing',
					success: () => {
						// 传递当前时间给添加页面
						const pages = getCurrentPages()
						const addPage = pages[pages.length - 1]
						addPage.$vm.createTime = new Date()
					}
				})
			},
			changeAtten(x, y, z) {
				uniCloud.callFunction({
					name: 'changAtten',
					data: {
						'_id': x,
						'strWarn': y
					}
				}).then(res => {
					this.UpdateList(z)
				}).catch(err => {
					console.log(err)
				})
			},
			deleteTodo(id) {
				uni.showModal({
					title: '删除提醒',
					content: '确定要删除这个待办事项吗？',
					success: (res) => {
						if (res.confirm) {
							uniCloud.callFunction({
								name: 'deleteTodolist',
								data: { _id: id }
							}).then(() => {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
								this.UpdateList(this.topitem);
							}).catch(err => {
								console.error(err);
								uni.showToast({
									title: '删除失败',
									icon: 'error'
								});
							});
						}
					}
				});
			},
			getCount(index) {
				if(!this.todoList.length) return 0
				return this.todoList.filter(item => 
					index === 0 ? !item.isOver : item.isOver
				).length
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background: #f7f8fa;
		padding-bottom: 120rpx;
	}

	.header {
		padding: 40rpx 30rpx 20rpx;
		background: #fff;
	}

	.header-title {
		font-size: 44rpx;
		font-weight: 600;
		color: #333;
	}

	.tabs {
		display: flex;
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.tab-item {
		position: relative;
		padding: 16rpx 30rpx;
		font-size: 28rpx;
		color: #666;
		border-radius: 32rpx;
		margin-right: 20rpx;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: #fff;
		background: #7F7FD5;
	}

	.tab-count {
		position: absolute;
		top: -6rpx;
		right: -6rpx;
		min-width: 32rpx;
		height: 32rpx;
		padding: 0 8rpx;
		background: #ff6b6b;
		border-radius: 16rpx;
		color: #fff;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.todo-list {
		padding: 30rpx;
	}

	.todo-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
	}

	.todo-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.todo-left checkbox {
		transform: scale(0.8);
		margin-right: 20rpx;
	}

	.todo-content {
		flex: 1;
	}

	.todo-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 12rpx;
	}

	.todo-title.completed {
		color: #999;
		text-decoration: line-through;
	}

	.todo-info {
		font-size: 24rpx;
		color: #999;
	}

	.time {
		display: flex;
		align-items: center;
		margin-bottom: 6rpx;
	}

	.time image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}

	.note {
		color: #666;
	}

	.todo-right {
		display: flex;
		align-items: center;
	}

	.star-btn, .delete-btn {
		padding: 16rpx;
	}

	.star-btn image, .delete-btn image {
		width: 36rpx;
		height: 36rpx;
		opacity: 0.6;
		transition: all 0.3s;
	}

	.star-btn image.important {
		opacity: 1;
		transform: scale(1.1);
	}

	.add-btn {
		position: fixed;
		right: 30rpx;
		bottom: 160rpx;
		width: 80rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #7F7FD5, #86A8E7);
		border-radius: 50%;
		display: flex;
		align-items: center;
		
		justify-content: center;
		box-shadow: 0 2rpx 10rpx rgba(127,127,213,0.2);
		transition: all 0.3s;
		z-index: 99;
	}

	.add-btn:active {
		transform: scale(0.92);
		box-shadow: 0 1rpx 5rpx rgba(127,127,213,0.1);
	}

	.add-btn image {
		width: 40rpx;
		height: 40rpx;
	}

	/* 动画效果 */
	.animate__animated {
		animation-duration: 0.3s;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.animate__fadeIn {
		animation-name: fadeIn;
	}
</style>